<template>
    <a-modal v-model:open="open" width="400px" :closable="false" :mask="false" :footer="null" @ok="handleOk"
        style="left: 34%;">
        <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="1" :tab="`未读信息 (${MessageData.unread.length})`" class="srcoll">
                <backgNotice :fetchData="getSysMessageData" v-for="item in MessageData.unread" :key="item.id"
                    :item="item">
                    <FileDoneOutlined style="font-size: 20px;" />
                </backgNotice>
            </a-tab-pane>
            <a-tab-pane key="2" :tab="`已读信息 (${MessageData.read.length})`" force-render class="srcoll">
                <backgNotice :fetchData="getSysMessageData" v-for="item in MessageData.read" :key="item.id"
                    :item="item">
                </backgNotice>
            </a-tab-pane>
        </a-tabs>
    </a-modal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import backgNotice from '@/common/components/backg-header/backg-notice.vue';
import { FileDoneOutlined } from '@ant-design/icons-vue';
import { getSysMessageApi } from '@/common/apis/notice'

const activeKey = ref('1');
// 储存用户消息
const MessageData = ref();

const open = ref<boolean>(false);

const showModal = async () => {
    open.value = true;
    await getSysMessageData(); // 每次打开弹窗时重新获取数据
};

// 获取用户消息
const getSysMessageData = async () => {
    const res = await getSysMessageApi()
    MessageData.value = res.data.data
}

const handleOk = (e: MouseEvent) => {
    console.log(e);
    open.value = false;
};

defineExpose({
    showModal
})

onMounted(() => {
    getSysMessageData()
})
</script>

<style lang="scss">
.srcoll {
    height: 400px;
    overflow-y: auto;
}
</style>